<template>
  <section>
    <el-form label-width="120px" size="mini">
      <el-form-item label="可持有量：">
        <el-input size="mini" v-model="form.userEnabledNum" placeholder="每人限量" style="width: 200px"></el-input>
      </el-form-item>
      <el-form-item label="有效期：">
        <el-select size="mini" v-model="form.data.expiredType" @change="selExpiredTypeEvent">
          <el-option v-for="expired in expiredList" :key="expired.code" :label="expired.name" :value="expired.code"/>
        </el-select>
        <span class="tip" v-if="form.data.expiredType">{{expiredList.find(e=>e.code === form.data.expiredType).description}}</span>
      </el-form-item>
      <el-form-item label="设值：" v-if="form.data.expiredType !== 1">
        <div v-if="form.data.expiredType === 2">
          <el-input size="mini" v-model="form.data.expiredValue" style="width: 100px"></el-input>
        </div>
        <div v-else-if="form.data.expiredType === 3">
          <el-date-picker v-model="form.data.expiredValue" type="datetime" @change="selValue"
                          placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss"/>
        </div>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
  import Vue from 'vue'//后续添加属性，需要vue联动
  export default {
    name: "instanceInfo",
    props:['form'],
    data(){
      return{
        expiredList:[
          {name:'默认',code:1,description:'*和优惠券定义一致。'},
          {name:'设置时间段',code:2,description:'*从生效开始，多少天后失效，默认单位为 - “天”。'},
          {name:'设置过期时间',code:3,description:'*指定一个过期时间。'}
        ]
      }
    },
    watch: {
      form(nv, ov) {
        if(nv) this.init(nv)
      }
    },
    created(){
      this.init(this.form)
    },
    methods: {
      init(form){
        if(form.data ===undefined){
          Vue.set(form,'data',{expiredType:1,expiredValue:null})
        }
        console.log('看下参数-------',form)
      },
      selExpiredTypeEvent(e){
        this.form.data.expiredValue=null
      },
      selValue(e){
        console.log('时间选择器------',e)
      }
    }
  }
</script>

<style scoped>
.tip{
  color:#3a3a3a;
  font-size: 12px;
  margin-left: 10px;
}
</style>
